body {
  padding: 0;
  margin: 0; }

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  min-width: 800px;
  max-width: 1200px;
  min-height: 500px; }
  @media (max-width: 799px) {
    .container {
      min-width: 500px;
      max-width: 799px;
      min-height: 300px; } }
  .container > header {
    width: 100%;
    padding: 15px;
    border-radius: 20px 20px 0 0;
    background-color: #efefef; }
    @media (max-width: 799px) {
      .container > header h2, .container > header p {
        display: none; } }
  .container > nav {
    width: 100%;
    background: #888;
    margin: auto; }
    .container > nav > a {
      text-decoration: none;
      line-height: 20px;
      padding: 10px;
      display: none; }
      .container > nav > a:hover {
        font-size: 13pt; }
      .container > nav > a:link, .container > nav > a:visited, .container > nav > a:active {
        color: #fff; }
      @media (max-width: 799px) {
        .container > nav > a {
          display: block;
          text-align: left; } }
    @media (max-width: 799px) {
      .container > nav > ul {
        padding-left: 10px;
        display: none; }
        .container > nav > ul.open {
          display: block;
          position: left; } }
    .container > nav > ul > .li-1 {
      list-style: none;
      position: relative;
      margin: 0px;
      padding: 0px;
      text-align: center;
      display: inline-block; }
      .container > nav > ul > .li-1 > a {
        text-decoration: none;
        line-height: 20px;
        padding: 10px; }
        .container > nav > ul > .li-1 > a:hover {
          font-size: 13pt; }
        .container > nav > ul > .li-1 > a:link, .container > nav > ul > .li-1 > a:visited, .container > nav > ul > .li-1 > a:active {
          color: #fff; }
      @media (max-width: 799px) {
        .container > nav > ul > .li-1 {
          text-align: left;
          display: block; } }
      .container > nav > ul > .li-1:hover > ul {
        display: block; }
      .container > nav > ul > .li-1 > ul {
        display: none; }
        @media (min-width: 800px) {
          .container > nav > ul > .li-1 > ul {
            display: none;
            width: 60px;
            padding: 0px;
            margin: 0px;
            position: absolute;
            background-color: #888;
            top: 30px; } }
        .container > nav > ul > .li-1 > ul > .li-2 {
          list-style: none;
          position: relative;
          margin: 0px;
          padding: 0px;
          text-align: center;
          display: inline-block; }
          .container > nav > ul > .li-1 > ul > .li-2 > a {
            text-decoration: none;
            line-height: 20px;
            padding: 10px; }
            .container > nav > ul > .li-1 > ul > .li-2 > a:hover {
              font-size: 13pt; }
            .container > nav > ul > .li-1 > ul > .li-2 > a:link, .container > nav > ul > .li-1 > ul > .li-2 > a:visited, .container > nav > ul > .li-1 > ul > .li-2 > a:active {
              color: #fff; }
          @media (max-width: 799px) {
            .container > nav > ul > .li-1 > ul > .li-2 {
              text-align: left;
              display: block; } }
          .container > nav > ul > .li-1 > ul > .li-2:hover > ul {
            display: block; }
          .container > nav > ul > .li-1 > ul > .li-2 > ul {
            display: none; }
            @media (min-width: 800px) {
              .container > nav > ul > .li-1 > ul > .li-2 > ul {
                display: none;
                width: 60px;
                padding: 0px;
                margin: 0px;
                position: absolute;
                background-color: #888;
                top: 0px;
                left: 60px; } }
            .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 {
              list-style: none;
              position: relative;
              margin: 0px;
              padding: 0px;
              text-align: center;
              display: inline-block; }
              .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 > a {
                text-decoration: none;
                line-height: 20px;
                padding: 10px; }
                .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 > a:hover {
                  font-size: 13pt; }
                .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 > a:link, .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 > a:visited, .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 > a:active {
                  color: #fff; }
              @media (max-width: 799px) {
                .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3 {
                  text-align: left;
                  display: block; } }
              .container > nav > ul > .li-1 > ul > .li-2 > ul > .li-3:hover > ul {
                display: block; }
  .container > .main {
    min-height: 200px;
    box-sizing: border-box;
    background-color: #efefef;
    width: 80%;
    border-right: 5px solid #888; }
    .container > .main > .product-list {
      display: flex;
      flex-wrap: wrap; }
      @media (max-width: 799px) {
        .container > .main > .product-list {
          display: block; } }
      .container > .main > .product-list > h1 {
        width: 100%;
        font-size: 16pt; }
      .container > .main > .product-list > .product {
        width: 80px;
        height: 120px;
        margin: 8px;
        text-align: center;
        border: 3px solid #aaa; }
        @media (max-width: 799px) {
          .container > .main > .product-list > .product {
            width: 150px;
            height: 200px; } }
        .container > .main > .product-list > .product > h4 {
          margin: 5px; }
          @media (max-width: 799px) {
            .container > .main > .product-list > .product > h4 {
              margin: 10px;
              font-size: 16pt; } }
        .container > .main > .product-list > .product > img {
          width: 70px;
          height: 65px; }
          @media (max-width: 799px) {
            .container > .main > .product-list > .product > img {
              width: 140px;
              height: 120px; } }
        .container > .main > .product-list > .product > p {
          margin: 3px;
          font-size: 9pt;
          color: #666; }
          @media (max-width: 799px) {
            .container > .main > .product-list > .product > p {
              margin: 5px;
              font-size: 12pt; } }
  .container .sideline {
    min-height: 200px;
    box-sizing: border-box;
    background-color: #efefef;
    width: 20%;
    text-align: center; }
    .container .sideline > .links {
      text-align: center;
      min-width: 90px;
      min-height: 120px;
      border: 3px double #888;
      margin: 20px auto 0 auto; }
      @media (max-width: 799px) {
        .container .sideline > .links {
          position: relative;
          right: -100%;
          transition: right 1s; }
          .container .sideline > .links:hover {
            right: 0; } }
      .container .sideline > .links > .openbutton {
        position: absolute;
        left: -40px;
        font-size: 24pt;
        font-weight: bold;
        background: #eee; }
        @media (min-width: 800px) {
          .container .sideline > .links > .openbutton {
            display: none; } }
      .container .sideline > .links > h1 {
        width: 100%;
        font-size: 16pt; }
      .container .sideline > .links > p {
        font-size: 9pt; }
      .container .sideline > .links > .image {
        width: 50px;
        height: 50px; }
    .container .sideline > .book {
      position: relative;
      min-width: 50px;
      min-height: 100px;
      max-width: 100px;
      max-height: 200px;
      perspective: 1000px;
      margin: 20px auto 0 auto;
      transform-style: preserve-3d; }
      .container .sideline > .book > .hardcover_front {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d; }
        .container .sideline > .book > .hardcover_front > li {
          background-color: #aaa;
          transform: rotateY(-33deg);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transition: all 0.8s ease;
          transform-origin: 0% 100%; }
      .container .sideline > .book > .page {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d; }
        .container .sideline > .book > .page > li {
          background: linear-gradient(to right, #bbb 0%, #fffbec 100%);
          border-radius: 0px 5px 5px 0px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          height: 98%;
          transition: all 0.8s ease;
          transform-origin: left center; }
          .container .sideline > .book > .page > li > .btn {
            display: block;
            margin-top: 40px;
            font-size: 12pt;
            font-weight: bold;
            padding: 0 10px;
            color: #888;
            text-decoration: none;
            text-align: center;
            transition: color 0.3s, border-color 0.3s; }
            .container .sideline > .book > .page > li > .btn:hover {
              color: red; }
          .container .sideline > .book > .page > li:nth-child(1) {
            transform: rotateY(-20deg); }
          .container .sideline > .book > .page > li:nth-child(2) {
            transform: rotateY(-23deg); }
          .container .sideline > .book > .page > li:nth-child(3) {
            transform: rotateY(-26deg); }
          .container .sideline > .book > .page > li:nth-child(4) {
            transform: rotateY(-29deg); }
          .container .sideline > .book > .page > li:nth-child(5) {
            transform: rotateY(-32deg); }
      .container .sideline > .book > .book_spine {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateY(60deg) translateX(-5px) translateZ(-5px);
        width: 15px; }
        .container .sideline > .book > .book_spine > li {
          background-color: #666;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d; }
      .container .sideline > .book > .hardcover_back {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transform: rotateY(-15deg); }
        .container .sideline > .book > .hardcover_back > li {
          background-color: #aaa;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d; }
      .container .sideline > .book:hover > .hardcover_front li {
        transform: rotateY(-145deg);
        transition-duration: 1.2s; }
      .container .sideline > .book:hover > .page li:nth-child(1) {
        transform: rotateY(-30deg);
        transition-duration: 1.5s; }
      .container .sideline > .book:hover > .page li:nth-child(2) {
        transform: rotateY(-35deg);
        transition-duration: 1.8s; }
      .container .sideline > .book:hover > .page li:nth-child(3) {
        transform: rotateY(-115deg);
        transition-duration: 1.6s; }
      .container .sideline > .book:hover > .page li:nth-child(4) {
        transform: rotateY(-125deg);
        transition-duration: 1.4s; }
      .container .sideline > .book:hover > .page li:nth-child(5) {
        transform: rotateY(-135deg);
        transition-duration: 1.2s; }
    .container .sideline > span {
      line-height: 50px; }
    .container .sideline > .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: relative;
      background: red;
      animation: test linear 3s infinite alternate; }

@keyframes test {
  0% {
    top: -10px;
    left: 30%; }
  25% {
    top: 10px;
    left: 40%; }
  50% {
    top: -10px;
    left: 50%; }
  75% {
    top: 10px;
    left: 60%; }
  100% {
    top: -10px;
    left: 70%; } }
  .container > footer {
    width: 100%;
    padding: 15px;
    border-top: 5px solid #888;
    border-radius: 0 0 20px 20px;
    background-color: #efefef; }
    .container > footer > p {
      margin: 3px;
      font-size: 6pt;
      color: #666;
      text-align: center; }
